<template>
  <div class="bar-container">
    <h1>柱状图</h1>
    <highcharts :options="chartOptions" class="onlineHighcharts"></highcharts>
    <el-button type="primary" plain @click="refreshData">刷新数据</el-button>
  </div>
</template>

<script>
export default {
  name: "bar",
  data() {
    return {
      dataArr: [],
      chartOptions: {
        chart: {
          type: "column",
        },
        plotOptions: {
          column: {
            dataLabels: {
              enabled: true,
            },
          },
        },
        title: {
          text: "终端在线数量",
        },
        colors: ["#73BF69"],
        xAxis: {
          categories: ["第一单元", "第二单元", "第三单元", "第四单元"],
          style: {
            color: "#73BF69",
          },
        },
        yAxis: {
          title: {
            text: "",
          },
          labels: {
            enabled: false, //y轴上是否显示数值
          },
          gridLineWidth: 0, //y轴网格线宽度
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        legend: {
          enabled: false,
        },

        series: [
          {
            name: "num",
            colorByPoint: true,
            data: [10, 20, 50, 30],
            showInLegend: false,
          },
        ],
      },
    };
  },
  components: {},
  methods: {
    refreshData() {
      let num1 = Math.round(Math.random() * 100);
      let num2 = Math.round(Math.random() * 100);
      let num3 = Math.round(Math.random() * 100);
      let num4 = Math.round(Math.random() * 100);
      this.dataArr = [num1, num2, num3, num4];
      //highcharts的值好像必须这样赋，单个修改数组data中的值不会发生变化
      this.chartOptions.series[0].data = this.dataArr;
    },
  },
};
</script>

<style scoped></style>
